<template>
	<view class="content">
		<view class="top">
			<input type="text" v-model="question_title" placeholder="请输入关键词" placeholder-class="inputDefault" @input="changeName"/>
			<view class="pop" :class="typeIf?'name_active':''" @tap="typeClick">题型<i class="iconfont iconxiala" :class="typeIf?'i_active':''"></i></view>
		</view>
		<scroll-view scroll-y="true" class="popCont" v-show="typeIf">
			<view class="popItem" v-for="(item,index) in typeList" :key="index" @tap="typeItem(item.question_type_id,index)">
				<view :class="[index == typeIndex ? 'name_active' : '']">{{item.question_type_name}}</view>
				<i v-if="index == typeIndex" class="iconfont iconduigou"></i>
			</view>
		</scroll-view>
		<view class="quesView">
			<view class="quesItem" v-for="(item,index) in quesList" :key="index">
				<view class="quesCont">
					<view class="title">
						<view class="titleIndex">第{{index+1}}题<text class="titleButton" @tap="checkDetail(item.question_id)">查看</text></view>
					</view>
					<view class="cont" v-html="item.question_title"></view>
				</view>
			</view>
		</view>
		<uni-load-more  v-if="quesList.length > 5" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		data() {
			return {
				sid: '',
				zid: '',
				fname: '',
				zname: '',
				textbook: '',
				grade: '',
				education: 6,
				typeList: [],
				typeIf: false,
				typeIndex: 0,
				question_typeid: '',
				quesList: [],
				page: 1,
				status: 'more',
				reload: true,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				question_title: ''
			}
		},
		components:{
			uniLoadMore
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getQues();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page+1;
			var _this = this;
			setTimeout(function(){
				_this.getQues();
			},500);
		},
		onLoad(e) {
			this.sid = e.sid;
			this.zid = e.zid;
			this.fname = e.name;
			uni.setNavigationBarTitle({
				title: this.fname
			})
			this.zname = e.zname;
			this.textbook = e.textbook;
			this.grade = uni.getStorageSync('currentChild').grade;
			if(this.grade <= 6) {
				this.education = 6;
			} else if(this.grade > 6 && this.grade <= 9) {
				this.education = 9;
			} else if(this.grade > 9 && this.grade <= 12) {
				this.education = 9;
			}
			this.getType();
			this.getQues();
		},
		methods:{
			/* 获取试题 */
			getQues() {
				var data = {
					zid: this.zid,
					sid: this.sid,
					textbook: this.textbook,
					grade: this.grade,
					education: this.education,
					page: this.page,
					pagesize: 6
				}
				if(this.question_typeid) {
					data.question_typeid = this.question_typeid
				}
				if(this.question_title) {
					data.question_title = this.question_title
				}
				this.$zapi.apiPost('user/question.Lists/questionList',data).then(res=>{
					if(res.data.code == 200) {
						var list = res.data.data.data;
						this.quesList = this.reload ? list : this.quesList.concat(list);
						this.reload = false;
						this.status='more';
					} else {
						if(this.reload) {
							this.quesList = [];
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 获取题型 */
			getType() {
				this.$zapi.apiPost('user/currency.basic/questionTypeList').then(res=>{
					if(res.data.code == 200) {
						this.typeList = res.data.data;
						this.typeList.unshift({question_type_name:'全部',sid: ''})
					} else {
						this.typeList =  [];
					}
				})
			},
			/* 搜索题目名称 */
			changeName(){
				this.reload = true;
				this.page = 1;
				this.getQues();
			},
			/* 题型列表开关 */
			typeClick() {
				this.typeIf = !this.typeIf;
			},
			/* 选择题型 */
			typeItem(question_type_id,index) {
				this.typeIndex = index;
				this.typeIf = false;
				this.reload = true;
				this.page = 1;
				this.question_typeid = question_type_id;
				this.getQues();
			},
			/* 查看试题详情 */
			checkDetail(question_id) {
				uni.navigateTo({
					url: 'detail?question_id='+question_id+'&name='+this.fname+'&zname='+this.zname
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FAFAFA;
	}
	.top{
		width: 100%;
		height: 88upx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: flex-start;
	}
	.top input{
		width: 560upx;
		line-height: 1;
		background-color: #FAFAFA;
		margin-top: 20upx;
		margin-left: 30upx;
		border-radius: 12upx;
	}
	.inputDefault{
		color: #999999;
		font-size: 30upx;
		text-align: center;
		background-image: url('../../static/image/search.png');
		background-repeat: no-repeat; 
		background-position: 30% 50%;
		background-size: 5%; 
	}
	.pop{
		width: 110upx;
		margin: 0 30upx;
		line-height: 88upx;
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 34upx;
	}
	.pop i{
		color: #999999;
		line-height: 88upx;
	}
	.popCont{
		position: fixed;
		top: 88upx;
		width: 100%;
		height: calc(100% - 88upx);
		background-color: rgba(0,0,0,.5);
	}
	.popItem{
		display: flex;
		justify-content: space-between;
		height: 88upx;
		padding: 0 30upx;
		background-color: #FFFFFF;
		border-top: 2upx solid #E5E5E5;
	}
	.popItem view{
		line-height: 88upx;
		color: #666666;
		font-size: 30upx;
	}
	.popItem i {
		line-height: 88upx;
		color: #FF9900;
	}
	.name_active{
		color: #FF9900 !important;
	}
	.i_active{
		color: #FF9900 !important;
		transform: rotate(180deg);
	}
	/* 试题 */
	.quesView{
		margin-top: 100upx;
	}
	.quesItem{
		background: #FFFFFF;
	}
	.quesCont{
		padding: 20upx 30upx;
		width: 690upx;
		margin-bottom: 10upx;
	}
	.title{
		height: 90upx;
		border-bottom: 2upx solid #E5E5E5;
	}
	.titleIndex{
		color: #333333;
		font-size: 36upx;
		margin: auto;
		text-align: center;
		line-height: 90upx;
		margin-left: 92upx;
	}
	.titleButton{
		color: #FFFFFF;
		background: #FF9900;
		border-radius: 24upx;
		padding: 12upx 18upx;
		line-height: 1;
		font-size: 28upx;
		float: right;
		margin-top: 20upx;
	}
	.cont{
		color: #333333;
		font-size: 34upx;
	}
</style>
